<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_watch的立即执行与深度监视</title>
</head>
<body>
  <div id="test">
    <p>persons: {{persons}}</p>

    <button @click="persons[0].name='bob'">更新</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    /* 需求1: 实时将最新的persons保存到local中 */
    /* 需求2: 如果local中有persons, 一上来显示它的, 如果没有, 显示默认的 */
    const defaultPersons = [
          {id: 1, name: 'tom'},
          {id: 2, name: 'Jack'}
        ]
    // 读取一个local中只在persons
    const localPersons = JSON.parse(localStorage.getItem('persons_key'))

    const vm = new Vue({
      el: "#test",
      data: {
        persons: localPersons || defaultPersons
      },

      watch: {
        persons: {
          handler (value) {
            console.log('watch persons', value)
            // 将最新的persons保存到local中
            localStorage.setItem('persons_key', JSON.stringify(this.persons))
          },
          deep: true, // 开启深度监视, 既能监视本身的变化, 也能监视内部数据变化  默认是false
          immediate: true, // 开启立即执行, 初始时就会执行第一次
        }
      }
    })

    
  </script>
</body>
</html>